<template>
  <!--div形式的全部查询条件
  <el-drawer
    title="查询条件"
    :before-close="handleClose"
    v-model="isShow"
    direction="ttb"
    custom-class="demo-drawer"
    ref="drawer"
    size="300px"
    >-->
    <el-scrollbar style="height:200px;text-align: left;">
      <el-form
        inline
        label-position="right"
        :model="formModel"
        ref="formControl"
        class="demo-form-expand"
        label-suffix="："
        label-width="100px"
        size="mini"
      >
        <el-form-item
          v-for="(ctrId, index) in allFind"
          :key="'form_'+index"
          style="border:1px solid #cfe1f3"
          :style="{width: ( 150 * getCtrMeta(ctrId).colCount + 150 + 6 * (getCtrMeta(ctrId).colCount - 1) ) + 'px'}"
          :label="getCtrMeta(ctrId).label"
        >
          <!--判断要不要加载插槽-->
          <template v-if="getCtrMeta(ctrId).controlType === 1">
            <slot :name="ctrId">父组件没有设置插槽</slot>
          </template>
          <!--查询的子控件，采用动态组件的方式-->
          <template v-else>
            <component
              :is="ctlList[getCtrMeta(ctrId).controlType]"
              v-model="findItemModel[ctrId]"
              v-bind="getCtrMeta(ctrId)"
              @myChange="moreChange">
            </component>
          </template>
        </el-form-item>
        <el-form-item style="width:60px">
          <el-button type="primary" round>查询</el-button>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </el-scrollbar>
  <!--</el-drawer>-->
</template>

<script>
import { ref, onMounted, reactive } from 'vue'
import { formItemToFindItem, findItemListKey } from '../nf-el-find-item/map-el-find-item.js'
import { findProps } from '/nf-control-web'

/**
 * 查询控件的管理类
*/
const findManage = (props, context) => {
  // 查询子控件的model
  const findItemModel = ref({})
  // 查询控件的meta
  const findMeta = props.baseMeta

  // 属性里的查询条件
  const findModel = props.modelValue || {}

  // 子控件变化时，向上层组件返回查询对象
  const mySubmit = (query, ctlId, colName) => {
    console.log('ss', colName, query)
    if (typeof query[1] === 'undefined' || query[1] === '' || query[1] === null) {
      // 删掉不想查询的字段
      delete findModel[colName]
    } else {
      // 设置查询条件
      findModel[colName] = query
    }
  }

  // 更多查询里面子控件的事件
  const moreChange = (query, ctlId, colName) => {
    console.log('more', colName, query)
    // if (arrQuickFind.filter((id) => id === ctlId).length === 0) {
    //  arrQuickFind.push(ctlId)
    // }
    mySubmit(query, ctlId, colName)
  }

  // 抽屉是否打开
  const isShow = ref(false)
 

  // 收起抽屉判断快捷是否为空
  const moreClose = () => {
    
  }

  return {
    isShow, // 抽屉是否打开
    findItemModel, // 查询子控件的model
    moreChange, // 更多查询里面子控件的事件
    moreClose, // 收起抽屉，设置默认
    mySubmit // 查询子控件的事件
  }
}

export default {
  props: {
    ...findProps

  },
  setup(props, context) {
     // 控件字典
    const ctlList = findItemListKey
    console.log('查询控件-更多props', props)

    // 依据ID获取组件的meta，因为model不支持【】嵌套
    const getCtrMeta = (id) => {
      return props.itemMeta[id] || {}
    }

    // 获取 $ref
    const drawer = ref(null)
    const formControl = ref(null)
    onMounted(() => {
      // console.log('表单dom', formControl)
    })

    const resetForm = () => {
      // 清空表单
      formControl.value.resetFields()
    }

    // 抽屉是否打开
    // const isShow = ref(false)

    const {
      isShow, // 抽屉是否打开
      findItemModel, // 查询子控件的model
      moreChange, // 更多查询里面子控件的事件
      moreClose, // 收起抽屉，设置默认
      mySubmit // 查询子控件的事件
    } = findManage(props, context)

    return {
      isShow, // 抽屉是否打开
      // arrQuickFind, // 快捷栏的数组
      ctlList, // 子控件字典
      resetForm, // 重置表单
      formControl, // 获取表单的dom
      getCtrMeta, // 返回子控件的meta
      findItemModel, // 查询子控件的model
      moreChange, // 更多查询里面子控件的事件
      moreClose, // 收起抽屉，设置默认
      mySubmit
    }
  }
}
</script>